import React, { useState, useEffect, useRef } from 'react';
import '../../css/Home.css';
import Partners from '../../components/Partners';
import Footer from '../../components/Footer';

const Home: React.FC = () => {
  const [currentPage, setCurrentPage] = useState(0);
  const totalPages = 5; // 总共5个页面（包括Footer）
  const isScrolling = useRef(false);

  // 动态添加/移除滚动条样式
  useEffect(() => {
    // 添加样式
    const style = document.createElement('style');
    style.id = 'hide-scrollbar-style';
    style.innerHTML = `
      html {
        scroll-behavior: smooth;
      }

      body {
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
    `;
    document.head.appendChild(style);

    return () => {
      // 移除样式
      const styleElement = document.getElementById('hide-scrollbar-style');
      if (styleElement) {
        document.head.removeChild(styleElement);
      }
    };
  }, []);

  // 处理滚轮事件
  useEffect(() => {
    const handleWheel = (e: WheelEvent) => {
      if (isScrolling.current) return;
      
      if (e.deltaY > 50) {
        isScrolling.current = true;
        setCurrentPage(prev => Math.min(prev + 1, totalPages - 1));
      } else if (e.deltaY < -50) {
        isScrolling.current = true;
        setCurrentPage(prev => Math.max(prev - 1, 0));
      }
    };

    // 添加键盘事件支持
    const handleKeyDown = (e: KeyboardEvent) => {
      if (isScrolling.current) return;
      
      if (e.key === 'ArrowDown') {
        isScrolling.current = true;
        setCurrentPage(prev => Math.min(prev + 1, totalPages - 1));
      } else if (e.key === 'ArrowUp') {
        isScrolling.current = true;
        setCurrentPage(prev => Math.max(prev - 1, 0));
      }
    };

    window.addEventListener('wheel', handleWheel);
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('wheel', handleWheel);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  // 更新页面滚动位置
  useEffect(() => {
    const handleScroll = () => {
      isScrolling.current = false;
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    
    window.scrollTo({
      top: currentPage * window.innerHeight,
      behavior: 'smooth'
    });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [currentPage]);

  return (
    <div className="home-container">
      {/* Page 1: Hero Section */}
      <section className="page hero-page">
        <div className="hero-content">
          <h1>Precision Machinery Manufacturing Experts</h1>
          <p>20 Years Industry Experience · Global Fortune 500 Partners · Innovation Driven Future</p>
          <button className="cta-button">Explore Our Products</button>
        </div>
        <div className="scroll-indicator">
          <span>Scroll Down</span>
          <div className="arrow"></div>
        </div>
      </section>

      {/* Page 2: Products Center */}
      <section className="page product-center-page">
        <div className="page-content">
          <h2>Products Center</h2>
          <div className="product-center-content">
            <div className="product-center-text">
              <h3>Intelligent Automated Testing Platform</h3>
              <p>
                Our automated testing platform integrates advanced sensing technology and AI algorithms, capable of:
              </p>
              <ul>
                <li>High-precision component dimension inspection (accuracy up to ±0.001mm)</li>
                <li>Automated material performance testing and analysis</li>
                <li>Real-time production line quality monitoring</li>
                <li>Cloud-based test data storage and analysis</li>
              </ul>
              <button className="detail-button">View Details</button>
            </div>
            <div className="product-center-image">
              <img src="/images/test-platform.jpg" alt="Automated Testing Platform" />
            </div>
          </div>
        </div>
      </section>

      {/* Page 3: Case Studies */}
      <section className="page case-page">
        <div className="page-content">
          <h2>Case Studies</h2>
          <div className="case-grid">
            <div className="case-card">
              <img src="/images/case1.jpg" alt="Automotive Parts Inspection Case" />
              <h3>Fully Automated Inspection System for Automotive Group</h3>
              <p>Increased inspection efficiency by 300%, reduced labor costs by 60%</p>
            </div>
            <div className="case-card">
              <img src="/images/case2.jpg" alt="Production Line Upgrade Case" />
              <h3>Smart Production Line Upgrade for New Energy Company</h3>
              <p>Increased production capacity by 40%, reduced defect rate to below 0.5%</p>
            </div>
            <div className="case-card">
              <img src="/images/case3.jpg" alt="Robot Integration Case" />
              <h3>Industrial Robot Integration Solution</h3>
              <p>Achieved 24/7 unmanned production, saving 2M in annual labor costs</p>
            </div>
          </div>
        </div>
      </section>

      {/* Page 4: Key Partners */}
      <section className="page partners-page">
        <Partners />
      </section>

      {/* Page 5: Footer */}
      <section className="page footer-page">
        <Footer />
      </section>

      {/* Page Indicator */}
      <div className="page-indicator">
        {[...Array(totalPages)].map((_, index) => (
          <button
            key={index}
            className={`indicator-dot ${currentPage === index ? 'active' : ''}`}
            onClick={() => setCurrentPage(index)}
          >
            <span className="dot-circle"></span>
          </button>
        ))}
      </div>
    </div>
  );
};

export default Home;